<template>
  <page-frame class="mall-order">

    <!-- 选项卡 -->
    <tabs :list="pageTabList">
      <template slot="tool">
        <el-button type="primary" @click="exportExcel" :disabled="exportLoading">导出excel</el-button>
      </template>
    </tabs>

    <!-- 搜索 -->
    <div class="panel-box">
      <div class="panel-body">
        <search @doSearch="doSearch" />
      </div>
    </div>

    <!-- 列表 -->
    <!-- <div class="panel-box"> -->
    <div class="panel-box" style="background-color: transparent;">
      <order-table :queryParams="queryParams" />
    </div>

  </page-frame>
</template>

<script>
  import {
    Button
  } from 'element-ui'
  import PageFrame from '@cmpt_pc/frame'
  import Tabs from "@cmpt_pc/tab"
  import Search from "./components/search"
  import OrderTable from "./components/table"

  import {
    exportOrderList,
  } from "@api/modules_pc/order"
  import {
    getErrInfo,
  } from "@api/http"

  const PageTabList = [{
    name: '订单列表'
  }]

  export default {
    name: 'order-list',
    components: {
      [Button.name]: Button,
      PageFrame,

      Tabs,
      Search,
      OrderTable,
    },

    data() {
      return {
        pageTabList: PageTabList,
        queryParams: {},
        // 导出
        exportLoading: false,
      }
    },

    methods: {
      doSearch(queryParams) {
        this.queryParams = queryParams
      },

      exportExcel() {
        this.exportLoading = true
        exportOrderList({
            ...this.queryParams
          })
          .then(res => {})
          // .catch(err => {
          //   const {
          //     msg
          //   } = getErrInfo(err)
          //   this.$message({
          //     type: 'error',
          //     message: msg || '导出失败！',
          //   })
          // })
          .finally(() => {
            this.exportLoading = false
          })
      }
    },

  }
</script>
